<template>
	<view class="user">
		<!-- 1.0 用户头像 -->
		<view class="user-img">
			<image class="img" src="../../static/img/user.jpg" mode="widthFix">
			</image>
		</view>
		<!-- 2.0用户昵称 -->
		<view class="user-name">
			<text>昵称: Tom</text>
		</view>
		<!-- 3.0 创建时间 -->
		<view class="user-time">
			创建时间:<text class="txt">2020-10-10 12:30:56</text>
		</view>

		<!-- 4.0 性别 -->
		<view class="opt opt-1">
			<text class="label">性别:</text>
			<input class="inp" type="text" placeholder="请输入">
		</view>
		<!-- 4.0 年龄 -->
		<view class="opt">
			<text class="label">年龄</text>
			<input class="inp" type="text" placeholder="请输入">
		</view>
		<!-- 4.0 电话 -->
		<view class="opt">
			<text class="label">电话</text>
			<input class="inp" type="text" placeholder="请输入">
		</view>
		<!-- 4.0 地址 -->
		<view class="opt">
			<text class="label">地址</text>
			<input class="inp" type="text" placeholder="请输入">
		</view>
		<view class="opt">
			<button class="btn ">编辑</button>
			<button class="btn ">保存</button>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss">
	.user {
		padding: 10rpx 30rpx;
		.opt-1 {
			margin-top: 100rpx;
		}
		.opt {
			width: 100%;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			.label {
				display: inline-block;
				width: 120rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}
			.inp {
				width: calc(100% - 120rpx);
				height: 80rpx;
				border-bottom: 1px solid #ccc;
				padding-left: 20rpx;
				box-sizing: border-box;
			}
			.btn {
				padding: 0;
				margin: 0;
				font-size: 30rpx;
				padding: 2rpx 30rpx;
				margin-right: 20rpx;
				color: #666;
			}
		}

		// 头像
		.user-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			// 溢出部分隐藏
			overflow: hidden;

			// 上下20rpx边距  左右居中显示
			.img {
				width: 100%;
				vertical-align: middle;
			}
		}

		// 昵称
		.user-name {
			padding: 20rpx 0;
		}

		// 时间
		.user-time {
			width: 100%;
			padding: 10rpx 0;
			color: #ccc;

			.txt {
				color: #666;
			}
		}
	}
</style>